<!-- Dom模板 -->
<template>
  <div class="box">
    <!-- Dom内容 -->
    <header>
      <div id="time">
        <p>
          <span>下单时间</span><span><Time @timeAll="timeAll" /></span>
        </p>
      </div>
      <div>
        <p>
          <span>下单人手机号</span
          ><span><Cellphone @cellPhone="cellPhone" /></span>
        </p>
      </div>
      <div>
        <p>
          <span>店铺评价等级</span
          ><span><Select :options="options" @selectDp="selectDp" /></span>
        </p>
      </div>
      <div>
        <p>
          <span>骑士评价等级</span
          ><span><Selectqis @selectQis="selectQis" /></span>
        </p>
      </div>
      <div class="btn">
        <p>
          <span> <Query @queryList="queryList" /> </span
          ><span> <Reset @resetList="resetList" /> </span>
        </p>
      </div>
    </header>
    <main>
      <Table
        :list="
          tableData.tableData.slice(
            (currentPage - 1) * pagesize,
            currentPage * pagesize
          )
        "
        :table-config="tableConfig"
        @Particulars="Particulars"
        @onSortChange="onSortChange"
      />
      <transition name="aaa">
        <Details class="baox" v-show="falgs">
          <div class="baox_1">
            <div class="Liclone">
              <div class="gclon" @click="clone">
                <i class="el-icon-arrow-left"></i><span>返回</span>
              </div>
            </div>
            <div class="dingdanxinx">
              <span>订单信息</span><br />
              <em></em>
            </div>
            <div class="dengji">
              <div>
                <span>店铺评价等级:</span>

                <span v-if="item.star === '1星'">
                  <i class="el-icon-star-on"></i>
                </span>
                <span v-if="item.star === '2星'">
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                </span>
                <span v-if="item.star === '3星'">
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                </span>
                <span v-if="item.star === '4星'">
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                </span>
                <span v-if="item.star === '5星'">
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                </span>
              </div>
              <div>
                <span>订单号:</span><span>{{ item.orderNum }}</span>
              </div>

              <div>
                <span>联系人:</span><span>{{ item.name }}</span>
              </div>

              <div>
                <span>手机号:</span><span>{{ item.phoneNum }}</span>
              </div>

              <div>
                <span>订单价格:</span><span>{{ item.ordermoney }}</span>
              </div>

              <div>
                <span>支付价格:</span><span>{{ item.paymoney }}</span>
              </div>

              <div>
                <span>下单时间:</span><span>{{ item.downTime }}</span>
              </div>

              <div>
                <span style="margin-left: 2px">备注:</span><span>不要加辣</span>
              </div>
              <div>
                <span style="margin-left: 2px">评论内容:</span>
                <span>质量很好，价格公道。</span>
                <div>
                  <span>
                    <img
                      src="https://img0.baidu.com/it/u=574283538,544700096&fm=26&fmt=auto"
                      alt=""
                    />
                  </span>
                  <span>
                    <img
                      src="https://img1.baidu.com/it/u=2495488750,1529398177&fm=26&fmt=auto"
                      alt=""
                    />
                  </span>
                  <span>
                    <img
                      src="https://img0.baidu.com/it/u=3930431093,251875904&fm=26&fmt=auto"
                      alt=""
                    />
                  </span>
                  <span>
                    <img
                      src="https://img0.baidu.com/it/u=1571771781,2639907108&fm=26&fmt=auto"
                      alt=""
                    />
                  </span>
                </div>
              </div>
            </div>
            <div class="dingdanxinx">
              <span>配送信息</span><br />
              <em></em>
            </div>
            <div class="dengji">
              <div>
                <span>骑士评价等级:</span>
                <span v-if="item.kni === '1星'">
                  <i class="el-icon-star-on"></i>
                </span>
                <span v-if="item.kni === '2星'">
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                </span>
                <span v-if="item.kni === '3星'">
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                </span>
                <span v-if="item.kni === '4星'">
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                </span>
                <span v-if="item.kni === '5星'">
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                </span>
              </div>

              <div>
                <span>骑士:</span><span>{{ item.knightName }}</span>
              </div>

              <div>
                <span>手机号:</span><span>{{ item.knightphoneNum }}</span>
              </div>
              <div>
                <span>配送时间:</span><span>{{ item.downTime }}</span>
              </div>
              <div>
                <span>到达时间:</span><span>{{ item.downTime }}</span>
              </div>
              <div>
                <span style="margin-left: 2px">评论内容:</span>
                <span>送达准时。</span>
              </div>
            </div>
          </div>
        </Details>
      </transition>
      <div class="pag">
        <Paging
          :pageData="tableData.tableData"
          :handleSizeChange="handleSizeChange"
          :handleCurrentChange="handleCurrentChange"
        />
      </div>
    </main>
  </div>
</template>

<script>
import axios from "axios";
import Paging from "../../components/paging/index.vue";
import Details from "../../components/details/index.vue";
import Time from "../../components/time/index.vue";
import Cellphone from "../../components/cell_phone/index.vue";
import Select from "../../components/select/index.vue";
import Selectqis from "../../components/selectqis/index.vue";
import Query from "../../components/query/index.vue";
import Reset from "../../components/Reset/index.vue";
import Table from "../../components/table/index.vue";

import { mapState } from "vuex";
export default {
  components: {
    Time,
    Cellphone,
    Select,
    Selectqis,
    Query,
    Reset,
    Table,
    Paging,
    Details,
  },
  data() {
    return {
      msg: "测试",
      tableData: [],
      time: "", //时间信息
      item: {},
      falgs: false,
      falg: true,
      pagesize: 5, //每页的数据条数
      currentPage: 1, //默认开始页面
      iphone: "", //手机号
      selectdp: "", //店铺星级
      selectqis: "", //骑士星级
      options: [
        {
          value: "全部",
          label: "全部",
        },
        {
          value: "5星",
          label: "5星",
        },
        {
          value: "4星",
          label: "4星",
        },
        {
          value: "3星",
          label: "3星",
        },
        {
          value: "2星",
          label: "2星",
        },
        {
          value: "1星",
          label: "1星",
        },
      ],
      tableConfig: {
        style: "width:100%;",
        config: [
          {
            label: "订单号",
            prop: "orderNum",
          },
          {
            label: "联系人",
            prop: "name",
          },
          {
            label: "手机号",
            prop: "phoneNum",
          },

          {
            label: "订单金额",
            prop: "ordermoney",
            sortable: "custom",
          },
          {
            label: "支付金额",
            prop: "paymoney",
            sortable: "custom",
          },
          {
            label: "下单时间",
            prop: "downTime",
          },
          {
            label: "骑士姓名",
            prop: "knightName",
          },
          {
            label: "骑士手机号",
            prop: "knightphoneNum",
          },
          {
            label: "店铺评价等级",
            prop: "star",
          },
          {
            label: "骑士评价等级",
            prop: "kni",
          },
          {
            label: "操作",
            shown: true,
            isEdit: false,
            isDel: false,
            isParticulars: true,
            isUndercarriage: false,
          },
        ],
      },
    };
  },
  computed: {},
  // 生命周期 - 创建完成（访问当前this实例
  created() {
    console.log(this.count);
    this.$store.dispatch("evaluate/getList");
    this.$store.dispatch("evaluate/setList");
  },

  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    console.log(this.$store.getters.doneTodos);
    this.tableData = this.$store.state.evaluate;
  },
  // Vue方法定义
  methods: {
    timeAll(res) {
      this.time = res;
    },
    cellPhone(res) {
      this.iphone = res;
    },
    selectDp(res) {
      this.selectdp = res;
    },
    selectQis(res) {
      this.selectqis = res;
    },
    //获取详情
    Particulars(row) {
      this.item = row;
      console.log(this.item);
      this.falgs = true;
    },

    //排序方法
    onSortChange(res) {
      if (res.column.id === "el-table_1_column_4") {
        if (res.order === "ascending") {
          this.$store.dispatch("evaluate/sortList", {
            order: res.order,
          });
        } else if (res.prop === "ordermoney") {
          this.$store.dispatch("evaluate/sortList", {
            prop: res.prop,
          });
        }
      }
    },
    //关闭详情
    clone() {
      this.falgs = false;
    },
    //查询按钮
    queryList() {
      this.$store.dispatch("evaluate/setList", {
        time: this.time,
        iphone: this.iphone,
        selectdp: this.selectdp,
        selectqis: this.selectqis,
      });
      //动画效果
      this.openLoading();
    },
    //点击重置刷新页面
    resetList() {
      console.log("成功了-重置按钮");
      this.thisReLoad();
    },
    //刷新页面
    thisReLoad() {
      window.location.reload();
    },
    //动画
    openLoading() {
      const loading = this.$loading({
        // 声明一个loading对象
        lock: true, // 是否锁屏
        fullScreen: true, //是否为全屏 Dialog
        background: "rgba(255,255,255,0.7)", //遮罩背景色
      });
      setTimeout(function () {
        // 设定定时器，超时5S后自动关闭遮罩层，避免请求失败时，遮罩层一直存在的问题
        loading.close(); // 关闭遮罩层
      }, 2000);
      return loading;
    },
    //动画
    list() {
      const loading = this.$loading({
        // 声明一个loading对象
        lock: true, // 是否锁屏
        fullScreen: false, //是否为全屏 Dialog
        background: "rgba(255,255,255,0.7)", //遮罩背景色
      });
      setTimeout(function () {
        // 设定定时器，超时5S后自动关闭遮罩层，避免请求失败时，遮罩层一直存在的问题
        loading.close(); // 关闭遮罩层
      }, 2000);
      return loading;
    },
    handleSizeChange: function (size) {
      this.pagesize = size;
    },
    // 控制页面的切换
    handleCurrentChange: function (current) {
      this.currentPage = current;
    },
    //保存按钮的点击事件
    saveBtnClick() {
      const pageLoading = this.openLoading(); //调用方法，打开loading遮罩层
      let params = {
        //在这里定义参数
      };
      axios
        .post(url, params) //axios的post方法，url为后端接口地址，params为参数
        .then((res) => {
          if (res.code == 200) {
            //这里的判断条件根据接口数据而定
            pageLoading.close(); //请求成功之后就关闭遮罩层
            this.$message.success({
              message: "保存成功！",
            });
          }
        });
    },
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
.box {
  width: 90%;
  height: calc(100vh - 70px);
  margin: 0 20px;
  background: rgba(238, 241, 245);
}
header {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header div {
  height: 80px;
}
header div p {
  font-size: 13px;
  line-height: 80px;
}
#time{
  width: 200px;
}
header p span {
  float: left;
  margin: 0 3px;
}
.btn{
  width: 300px;
  padding-left: 130px;
}
main {
  width: 100%;
  height: auto;
  float: left;
}
main .pag {
  margin-top: 20px;
  float: right;
}
.aaa-leave-active,
.aaa-enter-active {
  transition: all 0.5s linear;
}

.aaa-leave-active,
.aaa-enter {
  height: 0px !important;
}
.baox {
  width: calc(100vw - 200px);
  height: calc(100vh - 70px);
  position: fixed;
  left: 200px;
  bottom: 0;
  background: rgba(238, 241, 245);
  padding: 0 20px;
}
.baox_1 {
  height: 100%;
  background: rgba(238, 241, 245);
  width: 100%;
  float: left;
}
.dengji {
  float: left;
  height: auto;
}
.dengji div {
  width: 100%;
  height: auto;
  float: left;
}
.dengji div span {
  font-size: 12px;
  float: left;
  line-height: 28px;
  margin-right: 5px;
}
.dengji div span i {
  float: left;
  font-size: 25px;
}
.dengji div span img {
  width: 80px;
  height: 80px;
}
.divList {
  position: fixed;
  width: 79%;
  height: 70px;
  bottom: 0;
  right: 67px;
}
.divList div {
  width: auto;
  height: 70px;
  float: right;
}

.Liclone {
  width: 100%;
  height: auto;
  float: left;
  cursor: pointer;
}
.xq {
  cursor: pointer;
}
.gclon i {
  font-size: 24px;
  float: left;
}
.gclon span {
  font-size: 11px;
  float: left;
  margin-top: 3px;
}
.dingdanxinx {
  width: 100%;
  height: auto;
  float: left;
  margin-top: 10px;
}
.dingdanxinx span {
  font-size: 14px;
}
.dingdanxinx em {
  width: 30px;
  border: 1.2px solid rgba(99, 180, 255);
  background: rgba(99, 180, 255);
  float: left;
  margin: 8px 0;
}
</style>
<style >
.el-input .el-input--suffix .el-input__inner :nth-child(3) {
  width: 150px;
}
</style>